<template>
	<div>
		<el-row>
			<el-col :span="1" :offset="1" style="padding-left: 0px;">
				<el-button type="primary" size="small" v-on:click='baseQuery'>查询</el-button>
			</el-col>
		</el-row>
		<el-dialog title="选择车系" v-model="showStart" size="small">
			<el-row :gutter="24">
				<el-col :span="11" style="margin-left:5px;">
					<el-input size="small" v-model="dictTreeSearchValue" :maxlength="200" placeholder="请输入内容" icon="search" @click="searchTree"></el-input>
				</el-col>
				<el-col :span="11" style="margin-left:5px;">
					<el-select size="small"
						           style="width: 100%;margin-left:15px;"
						           v-model="company"
						           multiple
						           placeholder="请选择品牌"
						           clearable>
							<el-option v-for="item in companyData"
							           :label="item.label"
							           :value="item.value"></el-option>
						</el-select>
				</el-col>
				<el-col :span="24" style="margin-left:5px;">
					<div style="height: 3em;"></div>
				</el-col>
				<el-col :span="24" style="margin-left:5px;">
					<el-tree :data="paramTreeData" :filter-node-method="filterNode" :highlight-current=true :props="defaultProps" accordion @node-click="handleNodeClick" :auto-expand-parent=false ref="dictTree" node-key="id"></el-tree>
				</el-col>
			</el-row>

			<div slot="footer" class="dialog-footer">
				<el-button @click="showStart = false">取 消</el-button>
				<el-button type="primary">提 交</el-button>
			</div>
		</el-dialog>
	</div>
</template>
<script>
	import carSeriesTree from '../../insPlugins/carSeries.vue'
	import echarts from 'echarts'
	export default {
		data: function() {
			return {
				//树形图查询条件
				dictTreeSearchValue: "",
				paramTreeData: [],
				//树型数据配置
				defaultProps: {
					children: 'child',
					label: 'label',
				},
				showStart: false,
				//品牌
				company:"",
				//品牌
				companyData: [
				{
					label:'全部',
					value:'all'
				},{
					label:'大众',
					value:'2'
				},{
					label:'别克',
					value:'3'
				},
				],
				//选中的类型（车型/车系）
				carType: '',
				//选择的车辆信息
				datalabel: '',
				datavale: ''
			}
		},
		methods: {
			//查询树节点
			searchTree: function() {
				if(this.$data.dictTreeSearchValue == "") {
					this.$message("请输入查询条件");
					this.queryParamTree();
					return;
				}
				this.$refs.dictTree.filter(this.$data.dictTreeSearchValue);
			},

			//点击资源树节点
			handleNodeClick(data) {
				debugger;
				this.$data.carType = data.type;
				this.$data.datalabel = data.label;
				this.$data.datavale = data.value;
			},
			//查询参数树
			queryParamTree: function() {
				//获取资源树
				debugger;
				this.$http.get(this.API_ROOT + '/base/car/tree', {}).then((response) => {
					this.$data.paramTreeData = response.data;
				}, (response) => {});
			},
			//资源过滤
			filterNode: function(value, data, node) {
				if(!value) return true;
				return data.label.indexOf(value) !== -1;
			},
			baseQuery: function() {
				this.$data.showStart = true;

			},
		},
		//表单创建时执行
		created: function() {
			debugger;
			this.queryParamTree();
		}
	}
</script>
<style>

</style>